<template>
    <!-- 三级联动规则关联查询页面 -->
    <div class="threeLevelPage">
        <!-- 标题 -->
        <div class="title">
            <ul>
                <li class="act">关系</li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="con">
                <!-- 检索表单 -->
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item style="width: 120px">
                        <el-select v-model="selectGx" placeholder="请选择关系">
                            <el-option label="行为关系" value="xvgx"></el-option>
                            <el-option label="资源关系" value="zygx"></el-option>
                            <el-option label="任务关系" value="rwgx"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="inputVal" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" style="background-color: #4271c4; color: #fff; font-size: 20px"
                            icon="el-icon-search" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <!-- 表格内容 -->
                <el-table height="800" :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="gxfl" label="关系分类"> </el-table-column>
                    <el-table-column prop="gzName" label="规则名称"> </el-table-column>
                    <el-table-column prop="sj" label="设计"> </el-table-column>
                    <el-table-column prop="bm" label="编码"> </el-table-column>
                    <el-table-column prop="bq" label="标签"> </el-table-column>
                    <el-table-column prop="dec" label="描述"> </el-table-column>
                    <el-table-column prop="dec" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="1" :page-sizes="[10, 15, 20, 25, 30, 35, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表单检索字段
            selectGx: "xvgx",
            inputVal: "",
            // 表格渲染数据
            tableData: [
                {
                    gxfl: "行为关系",
                    gzName: "行为规则1",
                    sj: "工艺流程",
                    bm: "tn3270",
                    bq: "xxxxx",
                    dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
                },
                {
                    gxfl: "行为关系",
                    gzName: "行为规则1",
                    sj: "工艺流程",
                    bm: "tn3270",
                    bq: "xxxxx",
                    dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
                },
                {
                    gxfl: "行为关系",
                    gzName: "行为规则1",
                    sj: "工艺流程",
                    bm: "tn3270",
                    bq: "xxxxx",
                    dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
                },
                {
                    gxfl: "行为关系",
                    gzName: "行为规则1",
                    sj: "工艺流程",
                    bm: "tn3270",
                    bq: "xxxxx",
                    dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
.threeLevelPage {
    .title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #fff;
        border-bottom: 2px solid #707070;

        ul {
            width: 10%;
            height: 99.9%;
            display: flex;
            justify-content: space-around;

            li {
                cursor: pointer;
                padding: 0 10px;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
            }

            .act {
                color: #05acb5;
                border-bottom: 2px solid #05acb5;
            }
        }
    }

    .content {
        padding: 10px;
        box-sizing: border-box;

        .con {
            width: 100%;
            background: #fff;
            padding: 20px 15px;
            box-sizing: border-box;
        }
    }
}
</style>